<script setup lang="ts">
import { reactive, watch } from 'vue';
import HomePhotoCarousel from './home-photo-carousel.vue';
import HomeMessageRecord from './home-message-record.vue';
import HomeHgyUtils from './home-hgy-utils.vue';
import HomeMessageInformation from './home-message-information.vue';

const state = reactive<{
  /**
   * 是否刷新
   */
  refresh: boolean;
  /**
   * 组件更新数量
   */
  componentsRefreshNumber: number;
}>({
  refresh: false,
  componentsRefreshNumber: 0,
});

watch(state, (newState) => {
  if (newState.componentsRefreshNumber === 4) {
    setTimeout(() => {
      state.refresh = false;
      state.componentsRefreshNumber = 0;
    }, 1000);
  }
});
</script>

<template>
  <scroll-view
    class="home-hgy__scroll-view app-page__wrapper"
    :scroll-y="true"
    :lower-threshold="100"
    :refresher-enabled="true"
    @scrolltoupper="
      () => {
        state.refresh = true;
      }
    "
  >
    <view class="home-hgy__wrapper">
      <view v-if="state.refresh" class="home-hgy__is-refresh-wrapper">
        <text>加载中...</text>
      </view>
      <home-photo-carousel
        :type="3"
        :refresh="state.refresh"
        @refresh="state.componentsRefreshNumber += 1"
      />
      <home-message-record
        theme="hgy"
        :refresh="state.refresh"
        @refresh="state.componentsRefreshNumber += 1"
      />
      <home-hgy-utils :refresh="state.refresh" @refresh="state.componentsRefreshNumber += 1" />
      <home-message-information
        :refresh="state.refresh"
        @refresh="state.componentsRefreshNumber += 1"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
.home-hgy {
  &__scroll-view {
    background-color: #f8f9fd;

    .nut-pull-refresh,
    .nut-pull-refresh-container {
      height: auto !important;
    }
  }

  &__wrapper {
    padding: 20px;
  }

  &__is-refresh-wrapper {
    margin-bottom: 20px;
    text-align: center;
    color: #999;
    font-size: 16px;
  }
}
</style>
